<template>
  <el-card class="attr">
    <!-- 添加属性的按钮 -->
    <el-button type="primary" :icon="Plus" :disabled="!CategoryStore.category3Id" @click="showAddAttr">添加属性</el-button>
    <!-- 属性表格 -->
    <el-table :data="attrList" border class="attr">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="attrName" label="属性名称" width="200" align="center" />
      <el-table-column label="属性值列表">
        <template v-slot="{ row }">
          <el-tag type="success" v-for="attrVal in row.attrValueList" :key="attrVal.id" class="attr-tag">{{ attrVal.valueName }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template v-slot="{ row }">
          <el-tooltip content="修改属性" placement="bottom-end" effect="light">
            <el-button size="small" type="primary" :icon="Edit" @click="setAttrItem(row)" />
          </el-tooltip>
          <el-tooltip content="修改属性" placement="bottom-end" effect="light">
            <div class="attr-delete">
              <el-popconfirm :title="`确定删除${row.attrName}吗?`" @confirm="deleteAttr(row.id)">
                <template #reference>
                  <el-button type="danger" size="small" :icon="Delete"></el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "AttrList",
};
</script>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useCategoryStore } from "@/stores/category";
import type { AttrList, AttrItem } from "@/api/product/models/attrModel";
import { getAttrListApi, deleteAttrApi } from "@/api/product/attr";
//得到pinia模块
const CategoryStore = useCategoryStore();

/*********************属性列表渲染功能***************************/
//定义一个属性列表
const attrList = ref<AttrList>([]);

/**************************复用请求函数**********************************/
const getAttrList = async () => {
  //解构数据
  const { category1Id, category2Id, category3Id } = CategoryStore;
  attrList.value = await getAttrListApi({
    //因pinia定义id类型是联合类型,有undefined,所以要加类型断言,才不会报错
    category1Id: category1Id as number,
    category2Id: category2Id as number,
    category3Id: category3Id as number,
  });
};

//监视category3Id数据变化
watch(
  () => CategoryStore.category3Id,
  async () => {
    const { category3Id } = CategoryStore;
    if (!category3Id) {
      //当没有category3Id的时候,需要清空属性
      attrList.value = [];
      return;
    }
    //当有category3Id或者category3Id变化时,需要发送请求,获取属性列表
    getAttrList();
  },
  { immediate: true } //添加属性回来的时候,一加载就发送请求
);

/***********************修改属性功能******************************/
// 声明接受props
const props = defineProps<{
  modelValue: boolean; // 是ts类型，小写
}>();

// 声明接受自定义事件
// 返回值emit是一个函数，用来触发自定义事件
const emit = defineEmits(["update:modelValue", "updateAttr"]);

//修改属性的回调
//需要将当前属性数据row传递到AddSetAttr组件(兄弟组件)
const setAttrItem = (row: AttrItem) => {
  emit("update:modelValue", !props.modelValue);
  //修改数据需要显示数据
  emit("updateAttr", row);
};

/**************************添加属性按钮**********************************/
//添加属性的回调
const showAddAttr = () => {
  emit("update:modelValue", !props.modelValue);
  //添加属性需要清空数据
  emit("updateAttr", {
    attrName: "",
    attrValueList: [],
  });
};

/**************************删除属性按钮**********************************/
//删除属性的回调
const deleteAttr = async (id: number) => {
  await deleteAttrApi(id);
  ElMessage.success("删除属性成功");
  //重新渲染页面
  getAttrList();
};
</script>

<style scoped>
.attr {
  margin-top: 20px;
}
.attr-tag {
  margin-left: 5px;
}
.attr-delete {
  display: inline-block;
  margin-left: 10px;
}
</style>
